<template>
	<div class="xy_table" :ref="refName">
		<!-- 表头 -->
		<div class="xy_table_head">
			<div
				class="table_head_item"
				v-for="(item, index) in tableVal.headVal"
				:key="index"
				:style="{
					maxWidth: item.width,
					textAlign: item.textAlign || 'center'
				}"
			>
				<div class="table_head_el" v-if="item.checkbox">
					<van-checkbox
						@change="checkAll"
						icon-size="13px"
						v-model="check"
						shape="square"
					></van-checkbox>
				</div>
				<div class="table_head_el" v-else-if="item.order"></div>
				<div class="table_head_el" v-else>
					{{ typeof item.title == 'undefined' ? item : item.title }}
				</div>
			</div>
		</div>
		<!-- 表身 -->
		<div class="table_body_body">
			<div v-if="!tableVal || tableVal.data.length == 0" class="nodata">暂无数据</div>
			<div class="hasData">
				<slot :row="tableVal"></slot>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'XyTable',
	/**
	 * 使用方法
	  <xy-table :tableVal="tableData">
			<template #default="{ row }">
				<div class="table_body_item" v-for="(item, index) in row.data" :key="index">
					<div class="table_body_cell">1</div>
					<div class="table_body_cell">
						<van-button type="info" size="mini">车辆入场</van-button>
					</div>
				</div>
			</template>
		</xy-table>

	  tableData: {
			headVal: [
				{
					title: '道闸名称',
					width: '30%'
				},
				{
					title: '道闸方法',
					width: '70%',
					textAlign: 'center'
				}
			],
			data: [{}, {}]
		}
	 */
	props: {
		tableVal: {
			// 表格数据展示 表头数据 headVal ｜ 内容数据 data
			type: Object,
			default: () => {}
		},
		refName: {
			// 两个以上的表格区分
			type: String,
			default: 'xyTable'
		}
	},
	watch: {
		tableVal: {
			deep: true,
			handler: function (val) {
				if (val) {
					this.$nextTick(() => {
						this.setStyle();
						this.isOpenCheckbox && this.checkJudge();
					});
				}
			}
		}
	},
	mounted() {
		this.tableVal.headVal.map((item) => {
			if (item.checkbox) {
				this.isOpenCheckbox = true;
			}
		});

		this.setStyle();
		this.isOpenCheckbox && this.checkAll();
	},
	data() {
		return {
			isOpenCheckbox: false /* 是否有复选框 */,
			check: false /* 复选框 */
		};
	},
	methods: {
		// 设置表格样式
		setStyle() {
			const table = this.$refs[`${this.refName}`]; // 当前表格元素

			const tableItem = table.getElementsByClassName('table_body_item'); // 当前table下的单元格

			for (let i = 0; i < tableItem.length; i++) {
				// 为子元素加上和表头相同的宽度样式

				this.tableVal.headVal.map((item, index) => {
					tableItem[i].children[index].style.maxWidth = item.width;
					tableItem[i].children[index].style.textAlign = item.textAlign;
					tableItem[i].children[index].style.height = tableItem[i].offsetHeight + 'px';
				});
			}
		},

		// 全选
		checkAll() {
			if (this.check) {
				this.tableVal.data.map((item) => {
					this.$set(item, 'isChecked', true);
				});
			} else {
				this.tableVal.data.map((item) => {
					this.$set(item, 'isChecked', false);
				});
			}

			this.$emit('checkChange', this.tableVal.data);
		},

		// 判断是否取消了所有选择
		checkJudge() {
			let num = 0;
			this.tableVal.data.map((item) => {
				if (item.isChecked) {
					num++;
				}
			});

			if (num == 0) {
				this.check = false;
			} else if (num === this.tableVal.data.length) {
				this.check = true;
			}
		}
	}
};
</script>

<style lang="scss">
/** table start */
.xy_table {
	font-size: 12px;
	color: #888;
	background-color: #fff;
	border: $--xy-table-border;
	border-radius: 3px;
	overflow: hidden;

	.van-icon.van-icon-success {
		@include xy-dfc;
	}

	.xy_table_head {
		background: rgb(78, 190, 200);
		color: #fff;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		.van-checkbox {
			display: inline-block !important;
		}

		.table_head_el {
			width: 100%;
			height: 100%;
			padding: 6px 5px;
			box-sizing: border-box;
			@include xy-dfc;
		}

		.table_head_item {
			box-sizing: border-box;
			border-right: $--xy-table-border;
			border-bottom: $--xy-table-border;
			flex: 1;
			text-align: center;
			padding-right: 1px;

			&:last-child {
				border-right: none;
			}
		}
	}

	.table_body_body {
		.nodata {
			padding: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #2c3c63;
		}

		.table_body_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #2c3c63;

			&:last-child {
				.table_body_cell {
					border-bottom: none;
				}
			}

			.table_body_cell {
				box-sizing: border-box;
				flex: 1;
				text-align: center;
				padding: 6px 5px;
				border-right: $--xy-table-border;
				border-bottom: $--xy-table-border;

				&:last-child {
					border-right: none;
				}
			}
		}

		.van-button {
			height: 18px;
		}
	}
	/** table end */
}
</style>